<script setup>
import { ref } from 'vue'
import { EditSourceService } from '@/api/sources'

const visibleDrawer = ref(false)

const formRef = ref()
const sourceForm = ref({
  id: -1,
  value: '',
  type: '',
  typeId: -1
})

// 显示弹窗
const editMsg = ref('添加')
const open = (source) => {
  sourceForm.value = { ...source }
  if (source.id) {
    editMsg.value = '修改'
  }
  visibleDrawer.value = true
  console.log(source)
}

// 设置规则
const rules = {
  value: [{ required: true, message: '数据源信息不能为空', trigger: 'blur' }]
}

const cancelEdit = () => {
  visibleDrawer.value = false
  formRef.value.clearValidate()
  editMsg.value = '添加'
}

// 添加节点并关闭弹窗
const emit = defineEmits(['success'])
// 编辑数据源选项
const handleEdit = async () => {
  await formRef.value.validate()
  ElMessageBox.confirm('确认' + editMsg.value + '?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await EditSourceService(sourceForm.value)
      // 成功回调
      cancelEdit()
      emit('success')
    })
    .catch(() => {})
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-model="visibleDrawer"
    title="数据源信息"
    direction="rtl"
    width="450"
    align-center
  >
    <el-form
      :model="sourceForm"
      :rules="rules"
      ref="formRef"
      size="large"
      autocomplete="off"
      @close="resetForm"
    >
      <el-form-item prop="value">
        <input
          type="text"
          v-model="sourceForm.value"
          placeholder="输入数据源信息"
          style="margin-top: -10px; width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="handleEdit"
          style="width: 100px; height: 35px"
          >提交{{ editMsg }}</el-button
        ><el-button
          @click="cancelEdit"
          style="width: 100px; margin-left: 50px; height: 35px"
          >取消</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
h1 {
  margin: 0;
  padding: 0;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fff;
  background-color: rgba(148, 144, 144, 0.3) 25;
}

.header {
  display: flex;
}

.table {
  box-sizing: content-box;
}

ul {
  padding: 20px 20px;
  display: flex;
  align-items: stretch;
  // background-color: rgb(49, 56, 98);
  margin-bottom: 20px;
  // align-content: center;
  align-items: center;
  // justify-content: center;
}

ul li {
  list-style: none;
  // margin-bottom: 20px;
  padding: 0;
  // line-height: 60px;
}

.select_box {
  /* 默认placeholder样式 */
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 30px;
  }

  /* 默认框状态样式更改 */
  :deep .el-input__wrapper {
    height: 45px;
    color: #4b617a;
    background-color: rgb(58, 65, 106) !important;
    box-shadow: none !important;
    /* 使用none替代透明边框 */
  }

  /* 修改下拉框focus时的样式 */
  :deep .is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px #8091a5 inset !important;
  }

  /* 清除按钮颜色 */
  // :deep .el-select__caret {
  //   color: #fff !important;
  // }

  /* 选中字体色 */
  :deep .el-input__inner {
    color: #fff !important;
  }
}

/* 下拉框-展开样式 */
/* 展开下拉背景及边框 */
:deep .el-popper {
  background-color: #8091a5 !important;
  border: 1px solid #8091a5 !important;
}

/* 下拉项hover样式 */
.el-select-dropdown__item.hover {
  background-color: #4b87dbe0 !important;
}

/* 下拉项颜色 */
.el-select-dropdown__item {
  color: #fff !important;
  text-align: center;
  background-color: #435984;
}

/* 箭头按钮样式（通常不需要修改背景色，只修改边框色即可） */
:deep .el-popper .el-popper__arrow::before {
  border-top-color: #fff !important;
  /* 修改箭头边框颜色 */
}
.add-task {
  width: 273px;
  height: 123px;
  text-align: center;
  line-height: 123px;
  color: #727070;
  border-radius: 3px;
  border: #727070 solid 1px;
  cursor: pointer;
  margin-left: 15px;

  &:hover {
    border-color: #fff;
    color: #fff;
  }
}

//滚动条
/* 定制滚动条的整体部分 */
::-webkit-scrollbar {
  width: 12px;
}

/* 定制滚动条的轨道 */
::-webkit-scrollbar-track {
  background: #e1e9f0; /* 更浅一些的蓝色 */
}

/* 定制滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #3f527d; /* 深蓝色 */
}

/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #3b5ba0; /* 更深一点的蓝色 */
}

input {
  padding-left: 10px;
  /* width: 273px;/ */
  /* width: 200px; */
  height: 36px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgb(58, 65, 106);
  /* opacity: 0.8; */
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #8091a5;
  line-height: 24px;
  /* text-align: center; */
  font-style: normal;
  text-transform: none;
  outline: none;
  background-color: rgb(58, 65, 106);
}

//下拉框
/* styles/custom-elements.css */
.el-select .el-input .el-input__inner {
  background-color: #33608f !important; /* 背景颜色 */
  color: #ffffff; /* 文字颜色 */
  border-color: #213c58; /* 边框颜色 */
}

.el-select .el-input .el-input__inner:hover {
  border-color: #0056b3; /* 鼠标悬停时的边框颜色 */
}

.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input.is-active .el-input__inner {
  border-color: #0056b3; /* 获得焦点时的边框颜色 */
}

.el-select-dropdown {
  background-color: #007bff; /* 下拉菜单背景颜色 */
}

.el-select-dropdown li {
  color: #ffffff; /* 下拉菜单文字颜色 */
}

.el-select-dropdown li.hover,
.el-select-dropdown li:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}
</style>
